<template>
  <div>
    <el-button type="primary" text @click="add"> 增加 </el-button>
    <!-- Form增加 -->
    <el-dialog v-model="dialogFormVisible" title="车型详情">
      <el-form :model="form">
        <el-form-item label="活动图片" :label-width="formLabelWidth">
          <el-upload
            class="avatar-uploader"
            :action="`${api}/index.php/index/Adminapi/aliuploadfile`"
            :data="jm()"
            :show-file-list="false"
            :on-success="
              (file) => {
                editImgsProps({ file, key: 'images' });
              }
            "
            :key="form.images"
          >
            <img
              v-if="form.images"
              :src="HttpnewImg+form.images"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="活动链接" :label-width="formLabelWidth">
          <el-input v-model="form.alink" autocomplete="off" />
        </el-form-item>
        <div class="elswitch">
          <el-form-item label="是否显示" :label-width="formLabelWidth">
            <el-switch v-model="form.isshow" active-value="1"  inactive-value="0" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
          </el-form-item>
        </div>
        <el-form-item label="排序" :label-width="formLabelWidth">
          <el-input v-model="form.orders" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="postData"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column
        prop="orders"
        label="排序"
        width="300"
        align="center"
      />
      <el-table-column prop="images" label="活动图片" width="400" align="center">
        <template #default="scope">
          <img
            style="width: 100px; height: 100px"
            :src="HttpnewImg + scope.row.images"
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="alink"
        label="活动链接"
        width="450"
        align="center"
      />
      <el-table-column
        prop="isshow"
        label="首页显示"
        width="400"
        align="center"
      >
      <template #default="scope">
            {{ scope.row.isshow == 1 ? '是' : '否'}}
      </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center" width="400">
        <template #default="scope">
          <el-button
            link
            type="primary"
            @click="tj(scope.row.id, scope.row.name)"
            v-if="scope.row.types == 1 || scope.row.types == 2"
            >添加奖项</el-button
          >
          <el-button link type="primary" @click="eid(scope.row.id)"
            >修改</el-button
          >
          <el-button link type="danger" @click="del(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import UploadFile from "element-plus";
import { ElMessageBox, ElMessage } from "element-plus";
export default {
  components: {
    [UploadFile.name]: UploadFile,
  },
  data() {
    return {
      HttpnewImg:"https://ckmco-video.oss-cn-shanghai.aliyuncs.com/",
      tableData: [],
      jxlist: [],
      jxform: [],
      form: [],
      form1: [],
      dialogFormVisible: false,
      dialogFormVisible1: false,
      dialogjx: false,
      formLabelWidth: "120px",
      imageUrl: "",
      value: "",
      id: "",
      hdid: "",
      hdname: "",
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    tj(id, name) {
      this.dialogjx = true;
      this.hdid = id;
      this.hdname = name;
      this.getjxlist();
    },
    add() {
      this.form.images = "";
      this.form.alink = "";
      this.form.orders = "";
      this.form.isshow = "";
      this.dialogFormVisible = true;
      this.id = "";
    },

    del(id) {
      ElMessageBox.confirm("是否确定删除?", "", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http
            .post("/index.php/api/indexlbdel", {
              id: id,
            })
            .then((res) => {
              if (res.code == 200) {
                this.getData();
                ElMessage({
                  message: "删除成功",
                  type: "success",
                });
              }
            });
        })
        .catch(() => {});
    },
    eid(id) {
      this.dialogFormVisible = true;
      this.id = id;
      this.$http
        .post("/index.php/api/indexlbxq", {
          id: id,
        })
        .then((res) => {
          if (res.code == 200) {
            this.form = res.data[0];
            this.form.isshow=res.data[0].isshow.toString();
          }
        });
    },

    getData() {
      this.tableData = [];
      this.$http.post("/index.php/api/indexlblist").then((res) => {
        this.tableData = res.data;
      });
    },
    postData() {
      console.log(this.form.cxiszd,this.form.indexisnew,this.form.isshow);
      let data = {
        id: this.id,
        images: this.form.images,
        alink: this.form.alink || "",
        orders: this.form.orders || "",
        isshow: this.form.isshow,
      };
      this.$http
        .post(
          this.id
            ? "/index.php/api/indexlbedit"
            : "/index.php/api/indexlbadd",
          data
        )
        .then((res) => {
          if (res.code == 200) {
            this.dialogFormVisible = false;
            ElMessage({
              message: this.id ? "编辑成功" : "新增成功",
              type: "success",
            });
            this.id = "";
            this.getData();
          }
        });
    },
    getTimeFormat(zcTime) {
      let time = new Date(zcTime).getTime() / 1000; //除1000 是变成秒级的时间戳 不除就是毫秒级
      return time;
    },
    disabledDateFun(time) {
      return time.getTime() < Date.now() - 8.64e7;
    },
    formatEmployment(type) {
      // 根据源数据经过处理 把处理之后的数据返回
      // 定义一个映射结构
      const map = {
        1: "赛艇系列",
        2: "其他系列",
      };
      return map[type];
    },
  },
};
</script>
<style>
.elswitch{
  display: flex;
}
.el-icon-plus {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
